<template>
	<view class="setPerson">
		<view class="form">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<!-- <image v-if="!form.avatar" src="https://s1.ax1x.com/2022/03/15/bv5wAP.png" mode=""></image>
							<image v-else :src="form.avatar" mode=""></image> -->
					<!-- <u-upload :fileList="fileList1" @oversize="oversize" @afterRead="afterRead" @delete="deletePic" name="1" :maxSize="262144"
								multiple :maxCount="4">
							</u-upload> -->
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1" width="250" height="150">
						<image v-if="!form.avatar" src="https://s1.ax1x.com/2022/11/30/zwWSfS.jpg" mode=""></image>
						<image v-else :src="util.imageApi+form.avatar" mode=""></image>
					</u-upload>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">个人ID：</view>
					<!-- <input v-model="form.memberId" class="uni-input" name="input"  /> -->
					{{form.memberId}}
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">昵称：</view>
					<input v-model="form.nickName" class="uni-input" name="input" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">微信：</view>
					<input v-model="form.openid" class="uni-input" name="input" />
				</view>
				<!-- <view class="uni-form-item uni-column">
							<view class="title">QQ：</view>
							<input v-model="form.memberId" class="uni-input" name="input" placeholder="这是一个输入框" />
						</view> -->
				<view class="uni-form-item uni-column">
					<view class="title">真实姓名：</view>
					<input v-model="form.realName" class="uni-input" name="input" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别：</view>
					<picker @change="bindTypeChange" :value="index" :range="list">
						<view class="uni-input">{{list[index]}}</view>
					</picker>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">生日：</view>
					<input v-model="form.age" class="uni-input" name="input" />
				</view>
				<view class="uni-btn-v">
					<button type="primary" form-type="submit">修改</button>
				</view>
				<!-- <view class="uni-form-item uni-column">
							<view class="title">职业：</view>
							<input v-model="form.memberId" class="uni-input" name="input" placeholder="这是一个输入框" />
						</view> -->
			</form>
		</view>
		<!-- <u-cell-group>
				<u-cell title="头像">
					<template>
						<view><input type="text"></view>
					</template>
				</u-cell>
				<u-cell title="个人ID">
				</u-cell>
				<u-cell title="昵称">
				</u-cell>
				<u-cell title="微信">
				</u-cell>
				<u-cell title="QQ">
				</u-cell>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="真实姓名"></u-cell>
				<u-cell title="性别"></u-cell>
				<u-cell title="生日"></u-cell>
				<u-cell title="职业"></u-cell>
			</u-cell-group>
			<u-cell-group>
				<u-cell title="收获地址"></u-cell>
			</u-cell-group> -->
	</view>
</template>

<script>
	import util from "@/util/index.js"
	export default {
		data() {
			return {
				util: util,
				fileList1: [],
				index: 0,
				list: ["男", "女", "保密"],
				form: {}
			}
		},
		onShow() {
			this.$http({
				url: '/member/getMyInfo',
			}).then(res => {
				if (res.data.code === 200) {
					this.form = res.data.data
					this.form.sex == 3 ? this.index = 2 : this.index = this.form.sex
				}
			})
		},
		methods: {
			oversize(e) {
				uni.showToast({
					title: '图片大小已超出限制！',
					icon: "error"
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				const result = await this.uploadFilePromise(event.file[0].url)
				if (result) {
					uni.showToast({
						title: "上传成功",
					})
					this.form.avatar = result
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: util.upload + '/rsc/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data)
							}, 1000)
						},
					});
				})
			},
			formSubmit() {
				this.$http({
					url: '/member/modifyMyInfo',
					data: {
						...this.form,
						sex: this.index == 2 ? 3 : this.index
					}
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: "修改成功",
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'error'
						})
					}
				})
			},
			formReset() {

			},
			bindTypeChange(e) {
				this.index = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './setPerson.css'
</style>
